/*
 * record detail
**/
<template>
<div class="weui-tab">
	<div class="weui-tab__panel">
	  <div class="w-head clearfix">
	  	<div class="w-step over loss" :class="{'active': infoData.status === 1}">
	  		<p class="item-a">下单</p>
	  		<p class="item-b">（未确认）</p>
	  		<p class="item-c">{{changeDate()}}</p>
	  	</div>
	  	<div class="w-step" :class="{'active': infoData.status === 2, 'over': infoData.status > 1}">
	  		<p class="item-a">确认有效</p>
	  		<p class="item-b">（已确认）</p>
	  		<p class="item-c">预计{{changeDate(2)}}</p>
	  		<i class="arrow"></i>
	  	</div>
	  	<div class="w-step" :class="{'active over': infoData.status === 3}">
	  		<p class="item-a">财务结算</p>
	  		<p class="item-b">（已结算）</p>
	  		<p class="item-c">确认后1周内</p>
	  		<i class="arrow"></i>
	  	</div>
	  </div>
	  <div class="info-box weui-cells">
	    <div class="weui-cell">
	      <label class="w-name">订单编号:</label>
	      <p class="w-value">{{infoData.orderNo}}</p>
	    </div>
	    <div class="weui-cell">
	      <label class="w-name">下单时间:</label>
	      <p class="w-value">{{infoData.orderTime}}</p>
	    </div>
	    <div class="weui-cell">
	      <label class="w-name">商品编号:</label>
	      <p class="w-value">{{infoData.skuId}}</p>
	    </div>
	    <div class="weui-cell">
	      <label class="w-name">商品名称:</label>
	      <p class="w-value">{{infoData.skuName}}</p>
	    </div>
	    <div class="weui-cell">
	      <label class="w-name">订单金额:</label>
	      <p class="w-value">￥{{infoData.totalPrice}}</p>
	    </div>
	    <div class="weui-cell">
	      <label class="w-name">商　　家:</label>
	      <p class="w-value">{{infoData.mallName}}</p>
	    </div>
	    <div class="weui-cell">
	      <label class="w-name">返 佣 金 :</label>
	      <p class="w-value yl">{{infoData.commision}}积分</p>
	    </div>
	    <!--<div class="weui-cell">
	      <label class="w-name">购买好友:</label>
	      <p class="w-value">{{infoData.friendUnionId}}</p>
	    </div>-->
	  </div>
	</div>
	
	<div class="quick-footernav"><a class="ui-btn" @click="back">&nbsp;&nbsp;返回&nbsp;&nbsp;</a></div>
	
	<div v-if="inGetData">
	    <div class="weui-mask_transparent"></div>
	    <div class="weui-toast" style="margin-top:3.8em; background:rgba(17, 17, 17, 0.5)">
	        <i class="weui-loading weui-icon_toast"></i>
	        <p class="weui-toast__content">数据加载中</p>
	    </div>
	</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  data () {
    return {
      inGetData: false, // loading
      infoData: {}
    }
  },
  computed: {
    ...mapState([
      'goodInfo'
    ])
  },
  mounted () {
    if (!this.goodInfo) {
      this.$router.back()
      return false
    }
    this.infoData = this.goodInfo
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    changeDate (num) {
      let sDate = this.infoData.orderTime
      if (!sDate) { return }
      sDate = sDate.substring(0, 10)
      if (num) {
        let aTime = sDate.split('-')
        let month = parseInt(aTime[1]) + num
        return (month > 12 ? (parseInt(aTime[0]) + 1) + '-0' + month % 12 : aTime[0] + (month > 9 ? '-' : '-0') + month) + '-' + aTime[2]
      }
      return sDate
    }
  }
}
</script>
<style scoped>
	.weui-tab{position: absolute;width: 100%;}
	.w-head{background: #fff;font-size: 0.12rem;padding: 0;line-height:0.34rem;color: #333;padding:0.21rem 0.1rem;}
	.w-step{width: 0.82rem;border: 1px solid #f4f5f8; border-radius: 8px; color: #999; line-height: 0.27rem; text-align: center; position: relative; margin: 0 0.18rem;float: left;}
	.w-step .item-a{font-size: 0.11rem;}
	.w-step .item-b{font-size: 0.12rem;}
	.w-step .item-c{font-size: 0.1rem;}
	.w-step .arrow{display: inline-block; height: 6px; width: 6px; border-width: 2px 2px 0 0; border-color: #ffecb7; border-style: solid; -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); position: relative; top: -2px; position: absolute; top: 50%; margin-top: -4px; right: 0.95rem;}
	.w-step.over{background: #ffefc5;color:#333;border-color: #ffa200;}
	.w-step.over .item-b{color: #73db3a;}
	.w-step.over .arrow{border-color: #ffa200;}
	.w-step.loss .item-b{color: #f85c37;}
	.w-step.active{transform: scale(1.2);}
	.w-step.active .arrow{right: 0.92rem;}
	.weui-cell:before{left:15px !important;right:15px !important;}
	.info-box{margin: 0.05rem 0 0.4rem !important;color:#333;}
	.w-name{font-size:0.13rem;font-weight:500;width: 0.8rem; text-align:center;white-space: nowrap;}
	.w-value{font-size:0.12rem;width: 2.4rem;}
	.w-value.yl{color: #ffa200;}
	.btn-box{padding: 0; line-height: 0.4rem; align-items: center; -webkit-box-align: center; padding-top: 0.1rem;}
	.btn-box .back{background: #ffa200; color: #fff; padding: 0.1rem 0.43rem; border-radius: 22px;}
</style>
